<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'"> -->
    <title>Snowfure</title>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- <h1>Hello World!</h1> We are using Node.js <span id="node-version"></span>, Chromium <span
        id="chrome-version"></span>, and Electron <span id="electron-version"></span>. -->
    <div id="container">
        <!-- <div id="file">
            <div id="file-item">
                
            </div>

            <div>
                <textarea id="file_content"></textarea>
            </div>
        </div> -->

        <div id="post">
            <div class="post_row" id="post_input">
                <select id="method">
                    <option>post</option>
                    <option>get</option>
                    <option>put</option>
                </select>
                <input type="text" id="url" >
                <button onclick="sendRequest()">发送请求</button>
                <button onclick="saveRequest()">保存请求</button>
            </div>
            <textarea class="post_row" id="req" cols="30" rows="10"></textarea>
            <textarea class="post_row" id="resp" cols="30" rows="10"></textarea>
        </div>
    </div>
</body>

</html>


<style>
    #container {
        display: flex;
        flex: 100% 0 0;
        flex-direction: row;
        justify-content: left;
    }

    #post {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }

    #post_input {
        display: flex;
        flex-direction: row;
    }

    #url {
        flex: 3
    }

    .post_row {
        width: 90vw;
        display: flex;
        flex: 1 1 auto;
    }


</style>

<script>

    function sendRequest() {
        var method = document.getElementById("method").value
        var url = document.getElementById("url").value
        var json = document.getElementById("req").value
        console.info("method:", method, "url:",url, "json:", json)
        axios({
            method: method,
            url: url,
            data: json,
            headers: {'Content-type': 'application/json'}
          }).then((result) => {
            console.info(result.data)
            var s = JSON.stringify(result.data)
            document.getElementById("resp").value = s
          }).catch((err) => {
            console.info(err)
            var errMsg = JSON.stringify(err.response.data)
            document.getElementById("resp").value = errMsg
          });
    }

    function saveRequest() {

    }

    listFiles()

    function listFiles() {
        axios({
            method: 'get',
            url: 'http://snowfure.com/file/testman',
            //data: json,
            headers: {'Content-type': 'application/json'}
          }).then((result) => {
            console.info(result.data)
            var list = result.data

            demoP = document.getElementById("file-item");
            list.forEach(myFunction)
            
            function myFunction(item, index) {
                demoP.innerHTML = demoP.innerHTML + '<button value="' + item + '" onClick="openFile()">'+ item + '</button><br>'
            }
          }).catch((err) => {
            console.info(err)
          });
    }

    function openFile() {
        
    }
</script>